<template>
  <div class="page-content" v-loading="loading">
    <div class="head">
      <el-button type="primary" icon="el-icon-search" @click="opensearch"
        >查询</el-button
      >
      <el-button type="info" icon="el-icon-refresh-right" @click="refresh"
        >刷新</el-button
      >
    </div>
    <div id="viewer"></div>
    <el-col
      :span="10"
      v-for="(item, index) in ProList"
      :key="index"
      :xs="24"
      :sm="16"
      :md="8"
      :lg="4"
    >
      <el-card :body-style="{ padding: '0px' }" shadow="hover" class="procard">
        <el-image
          :src="item.images.split(',')[0]"
          class="image"
          :preview-src-list="item.imgArr"
        ></el-image>
        <div style="padding: 8px;">
          <p>零件编码：{{ item.pjcode }}</p>
          <p>零件名称：{{ item.pjname }}</p>
          <p>零件车型：{{ item.pjsize }}</p>
          <p>零件产地：{{ item.pjfactory }}</p>
          <p>零件品牌：{{ item.pjbrand }}</p>
          <div class="bottom clearfix">
            <el-button
              type="danger"
              class="button"
              size="mini"
              v-if="item.isupload == false"
              @click="
                uploadpjData(
                  item.pjid,
                  item.pjcode,
                  item.pjname,
                  item.pjsize,
                  item.pjfactory,
                  item.pjgensize,
                  item.images
                )
              "
              ><i class="el-icon-sell el-icon--left"></i>上架</el-button
            >
            <el-button
              type="info"
              class="button"
              size="mini"
              v-else
              @click="offshelfpjData(item.pjid)"
              ><i class="el-icon-sold-out el-icon--left"></i>下架</el-button
            >
            <el-button
              type="primary"
              class="button"
              size="mini"
              @click="upimg(item.pjname, item.pjid, item.images, item.imagesid)"
              ><i class="el-icon-upload el-icon--left"></i>上传图片</el-button
            >
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :lg="24">
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
        :current-page.sync="page"
        @current-change="changePage"
        layout="total, prev, pager, next, jumper"
      />
    </el-col>
    <el-dialog
      :title="imgform.name"
      :visible.sync="imgFormVisible"
      :close-on-click-modal="false"
      @close="clearimg"
    >
      <el-upload
        :action="dataUrl"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        accept="image/*"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog
        :visible.sync="dialogVisible"
        :title="imgform.name"
        append-to-body
      >
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-dialog>
    <el-dialog
      :visible.sync="searchFormVisible"
      :close-on-click-modal="false"
      title="查询"
      width="30%"
      @close="resetForm('searchForm')"
    >
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <!-- <el-row class="pic_radio">
          <el-radio-group v-model="searchForm.ispic">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">有上传图片</el-radio-button>
            <el-radio-button label="0">没有上传图片</el-radio-button>
          </el-radio-group>
        </el-row> -->
        <el-row>
          <el-tooltip
            class="item"
            effect="dark"
            content="支持编码+车型"
            placement="top"
          >
            <form-input
              label="零件编码"
              placeholder="支持编码+车型"
              v-model="searchForm.pjcode"
              @keyup.enter.native="submitForm('searchForm')"
              ref="spjcode"
              prop="pjcode"
            ></form-input>
          </el-tooltip>
        </el-row>
        <el-row>
          <form-input
            label="零件名称"
            v-model="searchForm.pjname"
            @keyup.enter.native="submitForm('searchForm')"
            prop="pjname"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="零件车型"
            v-model="searchForm.pjsize"
            @keyup.enter.native="submitForm('searchForm')"
            prop="pjsize"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="零件产地"
            v-model="searchForm.pjfactory"
            @keyup.enter.native="submitForm('searchForm')"
            prop="pjfactory"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="零件品牌"
            v-model="searchForm.pjbrand"
            @keyup.enter.native="submitForm('searchForm')"
            prop="pjbrand"
          ></form-input>
        </el-row>
        <el-row style="float:right;margin-bottom:20px">
          <el-button type="primary" @click="submitForm('searchForm')"
            >查询</el-button
          >
          <el-button @click="resetForm('searchForm')">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getPjbaseApi } from "@/api/cardApi";
import { delpjimgApi } from "@/api/cardApi";
import { uploadpjApi } from "@/api/cardApi";
import { offshelfpjApi } from "@/api/cardApi";
import { baseUrl } from "@/utils/config";

export default {
  inject: ["reload"],
  data() {
    return {
      page: 1,
      pageSize: 18,
      total: 0,
      ProList: [],
      loading: true,
      searchForm: {
        pjcode: "",
        pjname: "",
        pjsize: "",
        pjfactory: "",
        pjbrand: ""
        // ispic: ""
      },
      imgform: {
        name: ""
      },
      imgFormVisible: false,
      searchFormVisible: false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      dataUrl: baseUrl + "/api/Show/upload_Imgurl"
    };
  },
  mounted() {
    this.getPjbaseData(1);
    // document.addEventListener("keydown", this.handleEvent);
  },
  methods: {
    // handleEvent(e) {
    //   var that = this;
    //   let key = window.event.keyCode;
    //   if (e.keyCode == 96 && that.searchFormVisible == false) {
    //     that.searchFormVisible = true;
    //   }
    // },
    getPjbaseData(pageindex) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      getPjbaseApi({
        guestcode: guestcode,
        gscode: gscode,
        pagesize: this.pageSize,
        pageindex: pageindex,
        pjcode: this.searchForm.pjcode,
        pjname: this.searchForm.pjname,
        pjsize: this.searchForm.pjsize,
        pjfactory: this.searchForm.pjfactory,
        pjbrand: this.searchForm.pjbrand,
        // ispic: this.searchForm.ispic,
        username: username,
        userid: userid,
        menuename: "ProdcutsShow",
        menucname: "产品中心",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        this.ProList = res.data;
        this.total = res.datacount;
        this.searchFormVisible = false;
      });
    },
    changePage(val) {
      this.getPjbaseData(val);
    },
    submitForm(formName) {
      this.getPjbaseData(this.page);
    },
    clearimg() {
      this.fileList = [];
      this.dataUrl = baseUrl + "/api/Show/upload_Imgurl";
      this.getPjbaseData(this.page);
    },
    upimg(name, pjid, imglist, idlist) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.imgFormVisible = true;
      this.imgform.name = name;
      for (var i = 0; i < imglist.split(",").length; i++) {
        this.fileList.push({
          name: "",
          url: imglist.split(",")[i],
          id: idlist.split(",")[i],
          pjid: pjid
        });
      }
      this.dataUrl =
        this.dataUrl +
        "?guestcode=" +
        guestcode +
        "&gscode=" +
        gscode +
        "&pjid=" +
        pjid;
    },
    handleRemove(file, fileList) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let id = file.id;
      let pjid = file.pjid;
      delpjimgApi({
        guestcode: guestcode,
        id: id,
        pjid: pjid
      }).then(res => {
        if (res.code == "0") {
          this.$message.success(res.msg);
          this.getPjbaseData(this.page);
        }
      });
    },
    uploadpjData(pjid, pjcode, pjname, pjsize, pjfactory, pjgensize, images) {
      let reg = new RegExp("http://img.inheart.cn", "g"); //g代表全部
      let newimages = JSON.stringify(images).replace(reg, "");
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      uploadpjApi({
        guestcode: guestcode,
        gscode: gscode,
        pjid: pjid,
        pjcode: pjcode,
        pjname: pjname,
        pjsize: pjsize,
        pjfactory: pjfactory,
        pjgensize: pjgensize,
        imgurl: newimages,
        menuename: "ProdcutsShow",
        menucname: "产品中心",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "上架",
        note: pjid
      }).then(res => {
        if (res.code == "0") {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.getPjbaseData(this.page);
      });
    },
    offshelfpjData(pjid) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      offshelfpjApi({
        guestcode: guestcode,
        gscode: gscode,
        pjid: pjid,
        menuename: "ProdcutsShow",
        menucname: "产品中心",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "下架",
        note: pjid
      }).then(res => {
        if (res.code == "0") {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.getPjbaseData(this.page);
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    opensearch() {
      this.searchFormVisible = true;
    },
    resetForm(formName) {
      this.searchFormVisible = false;
      this.$refs[formName].resetFields();
    },
    refresh() {
      this.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
.page-content {
  height: 100%;
  overflow: hidden;
  .head {
    margin-left: 10px;
    margin-bottom: 10px;
    span {
      margin-right: 10px;
    }
    .el-radio {
      margin-right: 10px;
    }
  }
  .procard {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    button {
      margin-left: 5px;
    }
  }

  .button {
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }
  .pic_radio {
    text-align: center;
    margin-bottom: 50px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  ::v-deep .el-dialog {
    overflow: hidden !important;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    .el-upload-list--picture-card .el-upload-list__item {
      margin: 0 5px 8px 0;
    }
  }
}
</style>
